<template>
  <div>
    {{ num }}
    <!-- {{ $store.getters.doubleNum }} -->
    {{ doubleNum }}
    <button @click="addNum(10)">+</button>
    <button @click="addNumAsync(30)">异步加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  methods: {
    ...mapMutations(['addNum', 'reduceNum']),
    ...mapActions(['addNumAsync'])
  },
  mounted () {
    console.log(this.$store)
    console.log(mapState(['num', 'num2', 'num3']))
    /*
    {
      num(){
        return store.state.num
      },
      num2(){
        return store.state.num2
      },
      num3(){
        return store.state.num3
      }
    }
    */
    console.log(mapMutations(['addNum', 'reduceNum']))
    /*
    {
      addNum(params){
        store.commit('addNum', params)
      },
      reduceNum(params){
        store.commit('reduceNum', params)
      }
    }
    */
  },
  computed: {
    ...mapState(['num']),
    ...mapGetters(['doubleNum'])
  }
}
</script>

<style lang="scss" scoped>

</style>
